<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
						 <!--视口宽度为设备宽度，不能缩放，移动设备优先-->
        <meta name="viewport"  content="width=device-width,user-scalable=no">
		<link rel="stylesheet" href="css/forstudent.css" />
		<link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
		<title>聚橙网</title>
	</head>
	<body>
		<div id="lan">
		<div class="head">
			<div class="left"><a href="../lrq/index.html"><</a></div>
			<span>学生票专区</span>
		<div class="right">...</div>	
		</div>
		
			<!--轮播图-->
		<div class="scoll">
			<!--第一部分：图片的列表-->
			<div class="imgsList">
				<ul>
					<li><img src="img/lunbo1.jpg"/></li>
					<li><img src="img/lunbo2.jpg"/></li>

				</ul>
			</div>
			<!--第二步分：方向-->
			<div class="direction"></div>
			<!-- 第三部分： nav-->
			<div class="list-nav"></div>
		</div>
		
		<!--  学生专区-->
		<div class="studenttop">
			<img src="img/logo.png">
			<span>亮身份牌，享学生特惠价</span>
			<a href="#">立即登录</a>
		</div>
		<div class="studentcenter">
			<img src="img/bg5.png">
		</div>
		<!--<div class="studentbottom">
			<ul>
				<li>
					<div class="one">
						<img  src="img/top1.jpg">
					</div>	
					<div class="two">
					<span>[深圳]【万有音乐系】《霓NEED…</span>
				
					</div>
					<div class="three">
						<p>学生价<b>￥99</b>起</p>
					</div>
				</li>
				
				<li>
					<div class="one">
						<img  src="img/top2.jpg">
					</div>	
					<div class="two">
					<span>[广州]【万有音乐系】刘思涵“同…</span>
				
					</div>
					<div class="three">
						<p>学生价<b>￥99</b>起</p>
					</div>
				</li>
				
				<li>
					<div class="one">
						<img  src="img/top3.jpg">
					</div>	
					<div class="two">
					<span>[石家庄]西班牙格拉纳达佛拉门戈…</span>
				
					</div>
					<div class="three">
						<p>学生价<b>￥99</b>起</p>
					</div>
				</li>
			</ul>
		</div>-->
<!--	Swiper插件	-->
	<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">	<div class="one">
						<img  src="img/top1.jpg">
					</div>	
					<div class="two">
					<span>[深圳]【万有音乐系】《霓NEED…</span>
				
					</div>
					<div class="three">
						<p>学生价<b>￥99</b>起</p>
					</div></div>
        <div class="swiper-slide">	<div class="one">
						<img  src="img/top2.jpg">
					</div>	
					<div class="two">
					<span>[广州]【万有音乐系】刘思涵“同…</span>
				
					</div>
					<div class="three">
						<p>学生价<b>￥99</b>起</p>
					</div></div>
        <div class="swiper-slide">	<div class="one">
					<img  src="img/top3.jpg">
					</div>	
					<div class="two">
					<span>[石家庄]西班牙格拉纳达佛拉门戈…</span>
				
					</div>
					<div class="three">
						<p>学生价<b>￥99</b>起</p>
					</div></div>
    </div>
	</div>    
	   <div class="containtop">
			<img src="img/bg6.png">
		</div>
		
		<div class="containcenter">
			<ul>
				<li id="city" onclick="showcity()">全部城市</li>
			
				<li id="allclass" onclick="showclass()">所有分类</li>
					<div id="cityhide">
					<ul>
						<li>全部城市</li>
						<li>深圳</li>
						<li>广州</li>
						<li>北京</li>
						<li>成都</li>
						<li>重庆</li>
						<li>武汉</li>
						<li>石家庄</li>
					</ul>
				</div>
				<div id="allclasshide"  onclick="show()">
					<ul>
						<li>所有分类</li>
						<li>演唱会</li>
						<li>话剧歌剧</li>
						<li>音乐剧</li>
						<li>舞蹈芭蕾</li>
						<li>音乐会</li>
					</ul>
				</div>
			</ul>
		
		</div>
		
		<div class="contain">
			<ul>
				<li>
					<div class="one">
						<img src="img/top1.jpg">	
				<!--		<div class="logo"></div>-->
					</div>
					<div class="two">
						<p>
							【万有音乐系】《霓NEED》——阿悄2017全国巡回演唱会--深圳站
						<p>
							<span>
								2017-12-07 20:00
							</span><br />
							<span>
								[深圳]A8音乐大厦二层A8Live 
							</span><br/>
							<span>学生价：<i>￥<b>99 </b></i> 起</span>
					</div>
				</li>
				
				<li>
					<div class="one">
						<img src="img/top1.jpg">	
					</div>
					<div class="two">
						<p>
							【万有音乐系】《霓NEED》——阿悄2017全国巡回演唱会--重庆站
						<p>
							<span>
								2017-12-09 19:30
							</span><br />
							<span>
								[重庆]MAOLiveclub重庆 
							</span><br/>
							<span>学生价：<i>￥<b>99 </b></i> 起</span>
					</div>
				</li>
				
				<li>
					<div class="one">
						<img src="img/top4.jpg">	
					</div>
					<div class="two">
						<p>
							【万有音乐系】“再见如初见”-陈佳2017追忆邓丽君演唱会 --- 昆明站
						<p>
							<span>
								2017-12-09 20:00
							</span><br />
							<span>
								[昆明]昆明胜利堂剧院
							</span><br/>
							<span>学生价：<i>￥<b>90 </b></i> 起</span>
					</div>
				</li>
				
				<li>
					<div class="one">
						<img src="img/top1.jpg">	
					</div>
					<div class="two">
						<p>
							【万有音乐系】《霓NEED》——阿悄2017全国巡回演唱会--成都站
						<p>
							<span>
								2017-12-10 19:30
							</span><br />
							<span>
								[成都]正火艺术中心1号馆
							</span><br/>
							<span>学生价：<i>￥<b>99 </b></i> 起</span>
					</div>
				</li>
				
				<li>
					<div class="one">
						<img src="img/top2.jpg">	
					</div>
					<div class="two">
						<p>
							【万有音乐系】刘思涵“同伙”LIVE 2017巡回演唱会--重庆站
						<p>
							<span>
								2017-12-14 19:30
							</span><br />
							<span>
								[重庆]MAOLiveclub重庆
							</span><br/>
							<span>学生价：<i>￥<b>99 </b></i> 起</span>
					</div>
				</li>
			</ul>
		</div>
		
		
		
		
		
		</div>
		<script>
   // 根节点  html节点
var html=document.documentElement;
			  // 获取整个html元素在客户端设备上的宽度
			  var width=html.getBoundingClientRect().width;
			  // 将整个width均分成多少份：15  
			   html.style.fontSize=width/15+"px";
		</script>	
				<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
		<script type="text/javascript" src="js/Marquee.js" ></script>
		<script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script>
<!--  轮播图-->
<script>

	$('.imgsList').Marquee({
	distance:width,
	time:2,
	direction: 'left'
   });
		</script>
	<!--	swiper-->
	<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
  slidesPerView : 3,})
      </script>
      
<script>    
      	function showcity(){ 
	if(cityhide = document.getElementById('cityhide').style.display=='none')
	{//如果show是隐藏的 
  document.getElementById('cityhide').style.display='block';//show的display属性设置为block（显示）
  document.getElementById("city").style.color="#fe8f40";
  
   document.getElementById('allclasshide').style.display='none';
   document.getElementById("allclass").style.color="black";
}else{//如果show是显示的

 document.getElementById('cityhide').style.display='none';//show的display属性设置为none（隐藏）
  document.getElementById("city").style.color="black";
  
   document.getElementById('allclasshide').style.display='none';
   document.getElementById("allclass").style.color="black";
}
 
}
	function showclass(){
		if(allclasshide=document.getElementById('allclasshide').style.display=='none')
		{
			  document.getElementById('allclasshide').style.display='block';//show的display属性设置为block（显示）
  document.getElementById("allclass").style.color="#fe8f40";
  
  document.getElementById('cityhide').style.display='none';
   document.getElementById("city").style.color="black";
		}
		else{
			 document.getElementById('allclasshide').style.display='none';//show的display属性设置为none（隐藏）
  document.getElementById("allclass").style.color="black";
  
  document.getElementById('cityhide').style.display='none';
   document.getElementById("city").style.color="black";

		}
		
	}
		
	</script>	
		
	</body>
</html>
